<template>
  <div class="detailInfo">
    <!-- 商品信息 -->
    <div class="good">
      <div class="left">
        <img src="@/assets/矩形.png" />
      </div>
      <div class="right">
        <div class="top fz20">￥345.00</div>
        <div class="buttom fz12">
          <span>库存:764件</span>
          <span>编号:10020000000</span>
        </div>
      </div>
    </div>
    <!-- 配送区域 -->
    <div class="area fz14">
      <div class="title">配送区域</div>
      <div class="group">
        <div class="left"><img src="@/assets/编组 4备份 4@2x.png" /></div>
        <div class="center">上海市浦东新区洲海路森兰美伦A栋1103</div>
        <div class="right">></div>
      </div>
    </div>
    <!-- 规格类型 -->
    <div class="type fz14">
      <div class="title">规格类型</div>
      <div class="group">
        <div class="spec active">瓶装</div>
        <div class="spec">套装</div>
        <div class="spec">套装</div>
      </div>
    </div>
    <!-- 购买数量 -->
    <div class="quantity fz14">
      <div class="title">规格类型</div>
      <!-- <van-stepper v-model="quantity" /> -->
      <van-stepper v-model="quantity" input-width="20px" button-size="32px" />
    </div>
    <!-- 立即购买 -->
    <van-button class="pay" color="linear-gradient(to right,  #FF5BF4,#622CCC)">
      {{ this.value === 0 ? '立即提货' : ' 加入云仓' }}
    </van-button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      quantity: 1
    }
  }
}
</script>

<style lang="less" scoped>
.detailInfo {
  padding-bottom: 10px;
  .good {
    display: flex;
    align-items: flex-end;
    padding: 30px 16px;
    .left {
      width: 90px;
      height: 90px;
      border-radius: 8px;
      margin-right: 16px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .buttom {
      margin-top: 10px;
      span {
        margin-right: 16px;
      }
    }
  }
  // 配送区域
  .area {
    // background-color: #ccc;
    margin: 16px;
    height: 60px;
    .group {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #afabb7;
    }
  }
  // 规格类型
  .type {
    // background-color: #ccc;
    margin: 16px;
    height: 60px;
    .group {
      margin-top: 12px;
      display: flex;

      .spec {
        margin-right: 12px;
        padding: 1px 10px;
        background: #f7f6fb;
        border-radius: 4px;
      }
      .active {
        border-radius: 5px;
        background: #622ccc;
        color: #fff;
      }
      //   align-items: center;
      //   justify-content: space-between;
      //   color: #afabb7;
    }
  }
  //   购买数量
  .quantity {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 124px;
  }
}
</style>
